<template>
  <div id="home">
    <mt-swipe :show-indicators="false" :auto="4000">
      <!--当组件被v-for的时候需要给一个key，不然会有警告-->
      <mt-swipe-item v-for="(item,index) in swipeImg" :key="index">
        <img :src="item.img" alt="">
      </mt-swipe-item>
    </mt-swipe>

    <!--九宫格-->
    <div class="home_cms_content">
      <my-ul>
        <my-li v-for="(grid,index) in grids" :key="index">
          <router-link :to="grid.router">
             <span>
               <img :src="grid.url" alt="">
             </span>
            <div>{{grid.title}}</div>
          </router-link>

        </my-li>
      </my-ul>
    </div>
  </div>
</template>

<script>
	export default {
		name: 'home',
		data () {
			return {
				swipeImg:[],
        grids:[
        	{className:'',title:'新闻资讯',url:require('../../assets/img/news.png'),router:{name:'news.list'}},
	        {className:'',title:'图文分享',url:require('../../assets/img/picShare.png'),router:{name:'photo.share',query:{categoryId:0}}},
	        {className:'',title:'商品展示',url:require('../../assets/img/goodsShow.png'),router:{name:'news.list'}},
          {className:'',title:'留言反馈',url:require('../../assets/img/feedback.png'),router:{name:'news.list'}},
	        {className:'',title:'搜索资讯',url:require('../../assets/img/search.png'),router:{name:'news.list'}},
	        {className:'',title:'联系我们',url:require('../../assets/img/callme.png'),router:{name:'news.list'}}

        ]
      }
		},
    created(){
			this.$axios.get('getlunbo')
        .then(res =>{
        	this.swipeImg = res.data.message;
        })
        .catch(err => console.log('获取轮播图数据失败',err))
    },
	}
</script>
<!--如果不想组件内的样式被应用到全局的话，那么可以在组件内的style上加入scoped属性，此时在页面上会看到有一个data-v-时间戳的东西，
在css看样式的时候会看到有个属性选择器，来确保唯一性和缩小查找范围-->
<style scoped>
  .mint-swipe{
    height:200px;
  }
  .mint-swipe-item img{
    width:100%;
  }
  .home_cms_content{
    width:100%;
    margin-top: 10px;
    min-height: 300px;
  }
  .home_cms_content img{
    height:50px;
  }
</style>